<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./fabric.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <div class="controls">
    <button id="brush-btn">画笔</button>
    <button id="eraser-btn">橡皮擦</button>
    <input type="range" id="size-slider" min="5" max="50" value="20">
    <span>大小: <span id="size-value">20</span></span>
  </div>
  <script>
    const canvas = new fabric.Canvas('canvas');
      let currentMode = 'brush';
      let brushSize = 20;
      
      // 初始化
      initCanvas();
      setupControls();
      
      function initCanvas() {
        // 设置默认绘画模式
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
        updateBrushSettings();
      }
      
      function setupControls() {
        // 画笔按钮
        document.getElementById('brush-btn').addEventListener('click', () => {
          currentMode = 'brush';
          updateMode();
        });
        
        // 橡皮擦按钮
        document.getElementById('eraser-btn').addEventListener('click', () => {
          currentMode = 'eraser';
          updateMode();
        });
        
        // 大小滑块
        document.getElementById('size-slider').addEventListener('input', (e) => {
          brushSize = parseInt(e.target.value);
          document.getElementById('size-value').textContent = brushSize;
          updateBrushSettings();
        });
      }
      
      function updateMode() {
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
        canvas.freeDrawingBrush.color = 'black';
        if (currentMode === 'brush') {
          
        } else {
          // console.log('橡皮擦模式')
          // canvas.isDrawingMode = true;
          // canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
          // // canvas.freeDrawingBrush.color = '#00000000';
          canvas.freeDrawingBrush.inverted = true;
        }
        
        updateBrushSettings();
      }
      
      function updateBrushSettings() {
        canvas.freeDrawingBrush.width = brushSize;
        canvas.freeDrawingBrush.strokeLineCap = 'round';
        canvas.freeDrawingBrush.strokeLineJoin = 'round';
        
        // 新增：确保上下文的线条宽度也被更新
        canvas.contextContainer.lineWidth = brushSize;
        canvas.contextTop.lineWidth = brushSize;
      }

  </script>
</body>
</html>